<template>
  <div id="div">
    <div id="loginA">
      <div class="top">
        <span class="iconfont" @click="$router.go(-1)">&#xe6bc;</span>
        <h2>手机登录</h2>
        <p>
          <span class="iconfont">&#xf0112;</span>
          <i></i>
          <span class="iconfont">&#xe71e;</span>
        </p>
      </div>
    </div>

    <!-- main -->
    <div id="mainL">
      <img src="../assets/images/images/logo.jpg" alt="" />
      <input type="text" placeholder="手机号" v-model="user.phone" />
      <input type="text" placeholder="密码" v-model="user.password" />
      <button type="button" @click='login'>立即登录</button>
    </div>
  </div>
</template>

<script>
//引入axios库
import {Login} from '../request/api';

export default {
  data() {
    return {
        user:{
            phone:"",
            password:"",
        }
    };
  },
  methods:{
      //封装登录事件
      login(){
          if(this.user.phone =='' ||this.user.password == ''){
              alert('账号密码不为空')
          }else{
            //调用登录接口
           Login(this.user)
            .then(res=>{
              console.log('登录');
              if(res.data.code == 200){
                //登陆成功
                sessionStorage.setItem('userinfo',JSON.stringify(res.data.list))
                //登录成功 跳转到首页
                this.$router.push('/mall')
              }else{
                alert(res.data.msg)
              }
            })
            .catch(err=>{
              console.log( err,'500');
            })
          }
      }
  }
};
</script>

<style scoped>
/* //引入样式 */
@import '../assets/css/login.css';
</style>
